import Header from "@/components/Header";
import { Select, Button, message } from "antd";
import "./remind.scss";
export default function index() {
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  const [messageApi, contextHolder] = message.useMessage();
  const success = () => {
    messageApi.open({
      type: "success",
      content: "保存成功",
    });
  };
  return (
    <div className="remind">
      <Header title="提醒设置" />
      <div className="cont">
        <ul>
          <li>
            <label htmlFor="">保险到期提醒</label>
            提醒时间：
            <Select
              defaultValue="前2个月"
              style={{ width: 120 }}
              onChange={handleChange}
              options={[
                { value: "前15天", label: "前15天" },
                { value: "前1个月", label: "前1个月" },
                { value: "前2个月", label: "前2个月" },
                { value: "不提醒", label: "不提醒" },
              ]}
            />
          </li>
          <li>
            <label htmlFor="">年检到期时间</label>
            提醒时间：
            <Select
              defaultValue="前1个月"
              style={{ width: 120 }}
              onChange={handleChange}
              options={[
                { value: "前15天", label: "前15天" },
                { value: "前1个月", label: "前1个月" },
                { value: "前2个月", label: "前2个月" },
                { value: "不提醒", label: "不提醒" },
              ]}
            />
          </li>
          <li className="third">
            <label htmlFor="">保养提醒</label>
            提醒时间：
            <Select
              defaultValue="5000公里或6个月"
              style={{ width: 120 }}
              onChange={handleChange}
              options={[
                { value: "5000公里或6个月", label: "5000公里或6个月" },
                { value: "2万公里或2年", label: "2万公里或2年" },
                { value: "不提醒", label: "不提醒" },
              ]}
            />
          </li>
          <li className="fourth">
            {contextHolder}
            <Button type="primary" onClick={success}>
              保存设置
            </Button>
          </li>
        </ul>
      </div>
    </div>
  );
}
